<template>
	<view class="page-search">
		<view class="page-search-container">
			<!-- #ifdef APP-PLUS -->
			<view class="top_view"></view>
			<!-- #endif -->
			<view class="app-header fixed-top">
				<!-- #ifndef MP-WEIXIN -->

				<view class="iconfont iconfanhui" @tap="goBack()"></view>
				<!-- #endif -->
				<view class="search-content">
					<text class="iconfont iconsousuo"></text>
					<input
						class="search-input"
						type="text"
						placeholder="输入商品关键词或商户名"
					/>
				</view>
				<view class="search-button" @tap="handleSearch">确定</view>
			</view>
			<view class="module-hot">
				<view class="module-header">热门搜索</view>
				<view class="module-body">
					<view class="item" v-for="(item, index) in hotList" :key="index">
						<text class="item-content">{{ item.name }}</text>
					</view>
				</view>
			</view>
			<view class="module-history">
				<view class="module-header">搜索历史</view>
				<view class="module-body">
					<view class="item" v-for="(item, index) in historyList" :key="index">
						<text class="iconfont icondengdai"></text>
						<text class="item-content">{{ item.name }}</text>
						<text class="iconfont iconjiantou"></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			hotList: [
				{
					name: '三文鱼',
				},
				{
					name: '金枪鱼',
				},
				{
					name: '金枪鱼',
				},
				{
					name: '金枪鱼',
				},
				{
					name: '金枪鱼',
				},
				{
					name: '金枪鱼',
				},
				{
					name: '金枪鱼',
				},
				{
					name: '金枪鱼',
				},
			],
			historyList: [
				{
					name: '三文鱼',
				},
				{
					name: '金枪鱼',
				},
				{
					name: '金枪鱼',
				},
				{
					name: '金枪鱼',
				},
				{
					name: '金枪鱼',
				},
				{
					name: '金枪鱼',
				},
				{
					name: '金枪鱼',
				},
				{
					name: '金枪鱼',
				},
			],
		};
	},
	methods: {
		handleSearch: function () {
			uni.navigateTo({
				url: '../search-result/index',
			});
		},
	},
};
</script>

<style lang="scss" scoped>
/*  #ifdef  APP-PLUS  */
@include mobileStatusBar(#fff);
.page-search {
	padding: var(--status-bar-height) 0 0;
}
/*  #endif  */
.page-search-container {
	padding: 104rpx 0 0;
	.app-header {
		/*  #ifdef  APP-PLUS  */
		top: var(--status-bar-height);
		/*  #endif  */
		display: flex;
		padding: 20rpx $uni-spacing-base;
		.iconfanhui {
			padding-right: 14rpx;
			line-height: 64rpx;
			font-size: 38rpx;
		}
		.search-content {
			display: flex;
			flex: 1;
			@include borderCreator('', solid, #ddd);
			border-radius: 32rpx;
			align-items: center;
			padding: 2rpx 16rpx;
			margin-right: 16rpx;
		}

		.iconsousuo {
			color: $uni-text-color-grey;
		}

		.search-input {
			font-size: $uni-font-size-sm;
			margin-left: 12rpx;
			flex: 1;
		}

		.search-button {
			padding-left: 8rpx;
			line-height: 64rpx;
			font-size: $uni-font-size-base;
			color: $uni-color-main;
		}
	}

	.module-header {
		background: #f5f5f5;
		padding: 20rpx 24rpx 16rpx;
		font-size: 28rpx;
	}

	.module-hot {
		.module-body {
			display: flex;
			overflow-x: auto;
			padding: 24rpx 0;
		}

		.item {
			width: 18% !important;
			min-width: 18%;
			max-width: 18%;
			padding: 0 12rpx;
		}

		.item-content {
			display: block;
			padding: 8rpx 0;
			@include borderCreator('', solid, #ddd);
			border-radius: 32rpx;
			text-align: center;
			font-size: $uni-font-size-sm;
			color: $uni-text-color;
		}
	}

	.module-history {
		.item {
			padding: $uni-spacing-base;
			@include borderCreator(bottom, solid, $uni-border-color-grey);
			font-size: $uni-font-size-sm;
			color: #888;
		}
		.iconfont {
			color: $uni-text-color-grey;
		}
		.icondengdai {
			position: relative;
			top: 3rpx;
			margin-right: 6rpx;
		}
		.iconjiantou {
			float: right;
		}
	}
}
</style>
